/**
 * Created by willem
 */
import './index.scss';
import 'swiper/dist/css/swiper.min.css';


import { Component } from 'react';

import { MainHeader, MainContent } from 'templates/MainLayout/MainLayout';
import T from 'utils/T';
import Swiper from 'swiper';


// 组件
import {
    Button, Tabs, Spin, Icon
} from 'antd';
const TabPane = Tabs.TabPane;
// import Draggable from './widgets/Draggable';
import Draggable from 'react-draggable';

// TODO 组件枚举
import Videojs from './Videojs';
import CarouselGather from './CarouselGather';
import Round3d from './Round3d';
import Template from './Template';
import ReactDraggable from './ReactDraggable';
import DragPosition from './DragPosition';
import Wheel from './Wheel';
import Carousel3d from './Carousel3d';
import Carousel3dTemp from './Carousel3dTemp';
import Carousel3d_double from './Carousel3d_double';
import Carousel3d_wheel from './Carousel3d_wheel';
import SvgCarousel from './SvgCarousel';
import TextCarousel from './TextCarousel';
import FilpClock from './FilpClock';
import Turn3d from './Turn3d';
// TODO 图片枚举
import Carousel3d_cover from './Carousel3d/cover.png';
import Round3d_cover from './Round3d/cover.png';
import CarouselGather_cover from './CarouselGather/cover.png';
import Carousel3d_wheel_cover from './Carousel3d_wheel/cover.png';
import DragPosition_cover from './DragPosition/cover.png';
import drag from './ReactDraggable/drag.png';
import Wheelimg from './Wheel/cover.png';
import VideojsImg from './Videojs/video.png';
import FilpClock_cover from './FilpClock/cover.png';
import Carousel3dTemp_cover from './Carousel3dTemp/cover.png';
import Carousel3d_double_cover from './Carousel3d_double/cover.png';
import SvgCarousel_cover from './SvgCarousel/cover.png';
import TextCarousel_cover from './TextCarousel/cover.png';
import Turn3d_cover from './Turn3d/cover.png';
const defaultPanes = [
    { title: '临时组件', content: <Template />, cover: FilpClock_cover },
    { title: '环形3d星球旋转', content: <Round3d />, cover: Round3d_cover },
    { title: '轮播集合', content: <CarouselGather />, cover: CarouselGather_cover },
    { title: '旋转轮播', content: <Carousel3d_wheel />, cover: Carousel3d_wheel_cover },
    { title: '移动拖拽', content: <ReactDraggable />, cover: drag },
    { title: 'Videojs', content: <Videojs />, cover: VideojsImg },
    { title: '拖拽画svg', content: <DragPosition />, cover: DragPosition_cover },
    { title: 'Wheel', content: <Wheel />, cover: Wheelimg },
    { title: 'FilpClock', content: <FilpClock />, cover: FilpClock_cover },
    { title: '3d轮播图', content: <Carousel3d />, cover: Carousel3d_cover },
    { title: '简单3d轮播图', content: <Carousel3dTemp />, cover: Carousel3dTemp_cover },
    { title: '双轴3d轮播图', content: <Carousel3d_double />, cover: Carousel3d_double_cover },
    { title: 'svg流光', content: <SvgCarousel />, cover: SvgCarousel_cover },
    { title: 'text轮播', content: <TextCarousel />, cover: TextCarousel_cover },
    { title: '3d旋转', content: <Turn3d />, cover: Turn3d_cover },
].map((item, index) => ({ ...item, dataIndex: index, key: String(index) }));

// TODO 媒体资源
import screenShot from './screenShot.svg';

export default class HtmlComponents extends Component {
    constructor(props) {
        super(props);
        this.newTabIndex = 0;
        this.state = {
            activeKey: defaultPanes[0].key,
            panes: T.lodash.take(defaultPanes, 1),
            isScreenShot: false
        };
    }

    componentDidMount() {
        this.swiper = new Swiper(this.swiperID, {
            slidesPerView: 10,
            spaceBetween: 20,
            height: 88,
            // loop: true,
            autoplay: true,
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
                hideOnClick: true, // 点击slide时显示/隐藏按钮。
            },
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        });
    }
    onChange = (activeKey) => {
        this.setState({ activeKey });
    }

    onEdit = (targetKey, action) => {
        this[action](targetKey);
    }

    add = () => {
        const panes = this.state.panes;
        const activeKey = this.state.activeKey + 1;
        panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
        this.setState({ panes, activeKey });
    };

    remove = (targetKey) => {
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (lastIndex >= 0 && activeKey === targetKey) {
            activeKey = panes[lastIndex].key;
        }
        this.setState({ panes, activeKey });
    };

    handleStart = (e) => {
        console.log(e);
    };

    handleDrag = (e) => {
        console.log(e);
    };

    handleStop = (e) => {
        console.log(e);
    };

    /**
     * 选择组件
     */
    selectComponent = (dataIndex) => {
        const panes = this.state.panes;
        const defPanes = defaultPanes.filter(item => item.dataIndex === dataIndex);
        const statePanes = panes.filter(item => item.dataIndex === dataIndex);
        const newPane = T.lodash.take(defPanes, 1)[0];
        const activeKey = newPane.key + (statePanes.length > 0 ? ('_' + statePanes.length) : '');
        panes.push({
            ...newPane,
            key: activeKey,
            title: newPane.title + (statePanes.length > 0 ? statePanes.length : '')
        });
        this.setState({ panes, activeKey });
    };

    /**
     * 开始截屏
     */
    startScreenShot = () => {
        // TODO 方法一： 图片不清晰

        // TODO 方法二： 图片清晰一点
        let node = document.querySelector('.ant-tabs-tabpane-active');
        // let node = document.body;

        this.setState({
            isScreenShot: true
        }, () => {
            T.helper.screenShot(node, 'png', '截图' + T.helper.dateFormat(new Date(), 'YYYYMMDDHHmmss'), {}, () => {
                this.setState({
                    isScreenShot: false
                });
            });
        });

    };


    render() {

        return (
            <div>
                {/*<MainHeader title="普通js/html组件" />*/}

                <MainContent style={{ background: 'rgba(0,0,0,0)' }}>
                    <div className={'htmlComponentBox'}>
                        <Draggable
                            // axis="y"
                            handle=".handle"
                            defaultPosition={{ x: 0, y: 0 }}
                            position={null}
                            grid={[25, 25]}
                            onStart={this.handleStart}
                            onDrag={this.handleDrag}
                            onStop={this.handleStop}
                        >
                            <div>
                                <div className={'swiper-container swiperBox'} ref={self => this.swiperID = self}>
                                    <div className="swiper-wrapper" >
                                        {
                                            defaultPanes.map(item => <div key={item.key} className={'swiper-slide'}>
                                                <div className={'imgBox handle'} onClick={() => this.selectComponent(item.dataIndex)}>
                                                    <img src={item.cover} alt="" width={'100%'} />
                                                </div>
                                                <p>{item.title}</p>
                                            </div>)
                                        }
                                    </div>
                                    <div className="swiper-button-prev" />
                                    <div className="swiper-button-next" />
                                    <div className="swiper-scrollbar" />
                                </div>
                                <div className={'toolbar'}>
                                    <div>工具栏</div>
                                    <div>
                                        {
                                            this.state.isScreenShot ? <Spin indicator={<Icon type="loading" style={{ fontSize: 12 }} spin />} /> :
                                            <img src={screenShot} onClick={this.startScreenShot} />
                                        }
                                    </div>
                                </div>
                                {
                                    this.state.panes.length > 0 && <Tabs
                                        hideAdd
                                        onChange={this.onChange}
                                        activeKey={this.state.activeKey}
                                        type="editable-card"
                                        onEdit={this.onEdit}
                                    >
                                        {this.state.panes.map(pane => <TabPane tab={pane.title} key={pane.key}>{pane.content}</TabPane>)}
                                    </Tabs>
                                }
                            </div>

                        </Draggable>
                    </div>


                </MainContent>
            </div>
        );
    }
}

